<template>
  <div class="menu">
    <h5>菜单管理</h5>
    <el-button
      type="primary"
      icon="el-icon-plus"
      class="addBtn"
      @click="addClick"
      >新增</el-button
    >
    <table class="table">
      <thead>
        <tr class="thead">
          <th v-for="(item, index) in state.tableHead" :key="index">
            <td v-if="item == '菜单名称'">{{ item }}</td>
            <span v-else>{{ item }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="tbody" v-for="(item, index) in state.tableData" :key="index">
          <td>{{ item.id }}</td>
          <td>
              <el-tree
                :data="item.childrens"
                node-key="id"
                :expand-on-click-node="false"
                :render-content="renderContent">
              </el-tree>

          </td>
          <td>{{ item.url }}</td>

          <td>{{ item.weigh }}</td>
          <td>
            <span class="edit-btn btn" @click="editClick(index)">编辑</span>
            <el-dropdown @command="handleCommand($event, index)">
              <span class="btn">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item command="showPower">API权限</el-dropdown-item>
                  <el-dropdown-item command="add">新增操作</el-dropdown-item>-->
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </td>
        </tr>
      </tbody>
    </table>
    <el-cascader
      :options="state.newTableData"
      :props="{ checkStrictly: true }"
      clearable
      v-if="state.iscache"
    ></el-cascader>
    <el-dialog
      :title="state.title"
      v-model="state.dialogVisible"
      custom-class="dialog"
      :append-to-body="true"
      @close="state.isEdit = false"
      :width="state.width"
      :modal="state.modal"
      >
      <el-form
        :model="state.form"
        label-width="80px"
        hide-required-asterisk
        class="form"
      >
        <el-form-item label="菜单名称:" required>
          <el-input v-model="state.form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单:">
          <el-cascader
            v-model="state.form.id"
            :options="state.newTableData"
            :props="state.props"
            placeholder="顶级菜单"
            @change="cascaderChange"
          ></el-cascader>
          <span class="info">默认为顶级菜单</span>
        </el-form-item>
        <el-form-item label="icon:" required>
          <el-input v-model="state.form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单path:" required>
          <el-input v-model="state.form.url" autocomplete="off"></el-input>
          <span class="info">指向的页面path</span>
        </el-form-item>
        <el-form-item label="是否菜单:" required>
          <el-radio v-model="state.form.ismenu" label="1">是</el-radio>
          <el-radio v-model="state.form.ismenu" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="排序:" required>
          <el-input-number
            v-model="state.form.weigh"
            controls-position="right"
            :min="1"
          ></el-input-number>
          <div class="info">数字越小越靠前</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="comfirmBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reactive, onMounted, getCurrentInstance, ref, inject } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { dateFormat } from "@/utils/validate.js";
const state = reactive({
  tableData: [],
  newTableData: [],
  groupsList: [],
  showIndex: -1,
  dialogVisible: false,
  isEdit: false,
  props: {
    value: "id",
    label: "title",
    checkStrictly: true,
    expandTrigger: "hover",
  },
  title: '新增菜单',
  tableHead: ["菜单ID", "菜单名称", "path", "排序", "操作"],
  form: {
    title: "",
    pid: "0",
    id: [],
    url: "",
    icon: "",
    ismenu: "1",
    weigh: 1,
    isShow: false,
  },
  route_id: 0,
  width: "1%",
  iscache: true,
  modal: false,
  defaultProps: {
    children: "children",
    label: "label",
  },
});

export default {
  name: "Role",
  components: {},
  setup(props, { emit }) {
    const ctx = getCurrentInstance();

    const _this = ctx.appContext.config.globalProperties;

    const getMenuList = () => {
      _this
        .$request({
          url: "?s=Learn.Admin.AdminRoles",
          params: {
            page: 1,
            pageSize: 10,
          },
        })
        .then((res) => {
            if (res.ret == 200) {
               state.newTableData = res.data.admin_roles
               console.log(state.newTableData)
               let dat = res.data.admin_roles;
               for (let i = 0;i < dat.length;i++){
                 let arr = {
                    id: dat[i].id,
                    label: dat[i].label,
                    children: dat[i].children
                 }
                 dat[i].childrens = [arr]
                }
                state.tableData = JSON.parse(JSON.stringify(dat))
            }
        });
    };
    //点击增加时
    function addClick() {
      state.form = {
        title: "",
        pid: "0",
        id: [],
        url: "",
        icon: "",
        ismenu: "1",
        weigh: 1,
        isShow: true,
        modal: true,
      };
      state.width = "50%";
      state.modal = true;
      state.title = '新增菜单'
      state.dialogVisible = true;
    }

    //编辑菜单按钮
    function editClick(index) {
      state.showIndex = index;
      state.width = "50%";
      state.title = '编辑菜单'
      state.modal = true;
      let route_id = state.tableData[index].id;
      state.route_id = route_id
      _this
        .$request({
          url: "?s=Learn.Admin.route_row",
          params: {
            route_id,
          },
        })
        .then((res) => {
          if (res.ret == 200) {
            let target = res.data.route;
            target.url = res.data.route.route;
            target.ismenu = res.data.route.ismenu + "";
            state.form = target;
            getMenuList();
            state.isEdit = true;
            state.dialogVisible = true;
          }
        });
    }
    //确定菜单按钮
    const comfirmBtn = () => {
      const params = {
        route: state.form.url,
        pid: state.form.pid,
        icon: state.form.icon,
        ismenu: state.form.ismenu,
        title: state.form.title,
        weigh: state.form.weigh,
      };
      if (state.isEdit) {
        params.route_id = state.route_id;
        _this
          .$request({
            url: "?s=Learn.Admin.editRoles",
            params: params,
          })
          .then((res) => {
            if (res.ret == 200) {
              ElMessage.success({
                message: "编辑成功",
                type: "success",
              });
              getMenuList();
              state.dialogVisible = false;
              state.edit = false;
            }
          });
      } else {
        _this
          .$request({
            url: "?s=Learn.Admin.addRoles",
            params: params,
          })
          .then((res) => {
            if (res.ret == 200) {
              ElMessage.success({
                message: "添加成功",
                type: "success",
              });
              state.dialogVisible = false;
              getMenuList();
            }
          });
      }
      // state.dialogVisible = false;
    };
    //操作菜单按钮
    const handleCommand = (command, index) => {
      console.log(command, index);
      let target = state;
      if (command == "del") {
      }
    };
    function cascaderChange(val) {
      console.log(val.length - 1);
      state.form.pid = val[val.length - 1];
      console.log(state.form.pid);
    }
    const edit = (e) => {
      state.title = '编辑菜单'
      state.width = "50%";
      state.modal = true;
      let route_id = e.id;
      state.route_id = route_id
      _this
        .$request({
          url: "?s=Learn.Admin.route_row",
          params: {
            route_id,
          },
        })
        .then((res) => {
          if (res.ret == 200) {
            let target = res.data.route;
            target.url = res.data.route.route;
            target.ismenu = res.data.route.ismenu + "";
            state.form = target;
            state.isEdit = true;
            state.dialogVisible = true;
          }
        });
    }
    const renderContent = (h,{node, data, index}) => {
      return h("span", {
        class: "custom-tree-node"
      }, h("span", {
        class: "color-ma-left"
      }, node.label), h("span",null, h("a", {
        class: "edit-tree",
        onClick: () => edit(data)
      }, "编辑 "), h("a", {
        class: "delete-tree",
        onClick: () => remove(data)
      }, "删除")));
    }
    const remove = (e) => {
      let id = e.id
      _this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this
          .$request({
            url: "?s=Learn.Admin.Route_del",
            params: {
              route_id:id
            },
          })
          .then((res) => {
            if (res.ret == 200) {
              ElMessage.success({
                message: "删除成功",
                type: "success",
              });
              getMenuList();
            }
          })
      }).catch(() => {});

    }
    onMounted(() => {
      getMenuList();
      state.width = "1px";
      state.modal = false;
      state.dialogVisible = true;
      state.iscache = true
      setTimeout(function () {
        state.dialogVisible = false;
        state.iscache = false
      }, 200);
    });
    return {
      state,
      editClick,
      comfirmBtn,
      addClick,
      edit,
      remove,
      cascaderChange,
      handleCommand,
      renderContent
    };
  },
};
</script>
<style lang="scss" scoped>
  /deep/ .color-ma-left{
    margin-right: 10px !important;
  }
  /deep/ .edit-tree {
    background: white;
    color: #606266;
    margin-right: 10px;
    padding:2px;
    border: 1px solid #f1f1f1;
    font-size: 11px;
    cursor: pointer;
  }

  /deep/ .edit-tree:active {
    color: #1890ff;
  }


  /deep/ .delete-tree {
    background: white;
    color: #606266;
    margin-right: 10px;
    padding:2px;
    border: 1px solid #f1f1f1;
    font-size: 11px;
    cursor: pointer;
  }
  /deep/ .delete-tree:active {
    color: #1890ff;
  }


  /deep/ .custom-tree-node {
    margin-bottom: 5px;
  }
.menu {
  background: #ffffff;
  h5 {
    font-size: 16px;
    padding: 20px 56px;
    border-bottom: 1px solid #e9e9e9ff;
  }
  .addBtn {
    margin-left: 56px;
    margin-bottom: 20px;
  }
  .custom-tree-node {
      margin-left: 10px;
  }

  .btn {
    color: #1890ff;
    cursor: pointer;
  }
  .edit-btn {
    margin-right: 8px;
  }
  .tree {
    display: flex;
    .title {
      padding-right: 10px;
      margin-left: 10px;
    }
  }
  .table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    th {
      padding: 16px 16px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      background: #fafafa;
      border-bottom: 1px solid #e8e8e8;
      -webkit-transition: background 0.3s ease;
      transition: background 0.3s ease;
    }
    .tbody {
      border-bottom: 1px solid #e8e8e8;
      td {
        padding: 16px 16px;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        -webkit-font-feature-settings: "tnum";
        font-feature-settings: "tnum";
      }
    }
  }
  /deep/ .el-table {
    th {
      background: #fafafa;
      padding: 16px 0;
      text-align: center;
    }
  }
  /deep/ .el-table {
    td {
      padding: 16px 0;
      text-align: center;
    }
  }
}
/deep/ .el-cascader {
  width: 100%;
}
</style>
<style lang="scss">
.el-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  .el-form {
    width: 50%;
    margin: 0 auto;
    .el-select {
      width: 100%;
    }
    .info {
      clear: both;
      min-height: 22px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
</style>
